<template>
  <div class="container">
    <!-- 页面名称 -->
    <div class="header">
      <span>在线用户</span>
    </div>

    <!-- 内容 -->
    <el-container class="body">
      <!-- 树形 -->
      <!-- <el-aside width="200px" class="mainaside">
        <div class="user_tree">
          <el-tree
            class="el-tree"
            ref="treeRef"
            :props="treeprops"
            :data="treeDate"
            node-key="fId"
            check-strictly="true"
            @current-change="selectTable"
          />
        </div>
      </el-aside> -->
      <el-main class="mainmain">
        <div class="firsthe">
          <!-- 新增按钮及查询 -->
          <!-- <el-button type="primary" class="add" @click="onHandleAdd"
            >新增</el-button
          > -->

          <!-- <el-dialog
            :width="500"
            :title="pageData.editDialogTitle"
            v-model="pageData.editDialogVisible"
            :close-on-click-modal="false"
            destroy-on-close
            custom-class="editDialog-class"
          >
            <edit
              :modifyObj="pageData.currentRow"
              :isAdd="pageData.isAdd"
              @Ok="onOk"
              @Cancel="() => (pageData.editDialogVisible = false)"
            />
          </el-dialog> -->
            <el-button-group>
              <el-button
                :v-if="pageData.permissions.Del"
                type="primary"
                @click="onHandleBatchDel"
                >
              <el-icon style="right:6px">
                <Delete />
              </el-icon>
                批量删除
              </el-button>
            </el-button-group>

          <div class="search">
            <el-input
              v-model="pageData.queryParams.keyword"
              placeholder="按登录名/名称搜索"
              clearable
              @blur="onHandleKeywordBlur"
              @clear="onHandleKeywordBlur"
              @keyup.enter="onHandleKeywordBlur"
              ><template #prepend>登录名/名称</template>
            </el-input>

            <el-button type="primary" plain @click="onHandleSearch"
              >搜索</el-button
            >
            <!-- <el-button type="warning" plain @click="onHandleReset"
              >重置</el-button
            > -->
          </div>
        </div>

        <el-row class="row-2">
          <!-- tabel -->
        <el-table
          ref="onlineuserTable"
          class="onlineuser-table"
          row-key="ftoken"
          stripe
          border
          highlight-current-row
          v-loading="pageData.tableParams.tableLoading"
          :data="pageData.tableParams.tableData"
          @selection-change="onHandleSelectionChange"
          @sort-change="tableSortFunc"
        >
          <!-- @current-change="(row) => (pageData.tableParams.currentRow = row)" -->
          <el-table-column
            :v-if="pageData.permissions.Del"
            type="selection"
            width="45"
            align="center"
          >
          </el-table-column>
          <el-table-column  type="index" label="序号" align="center">
          </el-table-column>
          <el-table-column
            prop="ffullname"
            label="用户名称"
            min-width="120"
            sortable="custom"
          >
          </el-table-column>
          <el-table-column
            prop="fusername"
            label="登录名"
            min-width="120"
            sortable="custom"
          >
          </el-table-column>
          <!-- <el-table-column prop="ftoken" label="用户Token" min-width="120">
          </el-table-column> -->
          <el-table-column
            prop="fisdealer"
            label="经销商"
            width="80"
            align="center"
            show-overflow-tooltip
            :formatter="typeFormatter"
          >
          </el-table-column>
          <el-table-column
            prop="fclienttype"
            label="客户端类型"
            width="100"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="fclientip"
            label="登录IP"
            width="120"
            align="center"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="flogintime"
            label="登录时间"
            width="150"
            align="center"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            :v-if="pageData.permissions.Del"
            label="操作"
            width="60"
            align="center"
            show-overflow-tooltip
          >
            <!-- <template #header>
              <span>操作</span>
            </template> -->
            <template #default="{ row }">
              <el-icon
                :v-if="pageData.permissions.Del"
                title="删除"
                style="cursor: pointer; margin: 0 3px"
                @click="onHandleDel(row.ftoken)"
              >
                <Delete />
              </el-icon>
            </template>
          </el-table-column>
        </el-table>
          <!-- 分页查询 -->
          <el-col :span="24">
          <el-pagination
            layout="total, sizes, prev, pager, next, jumper"
            :page-sizes="pageData.tableParams.pageSizeOptions"
            :current-page="pageData.queryParams.pageIndex"
            :page-size="pageData.queryParams.pageSize"
            :total="pageData.tableParams.total"
            @current-change="onHandleCurrentChange"
            @size-change="onHandleSizeChange"
          >
          </el-pagination>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import { onMounted, nextTick, reactive, ref, toRefs } from "vue";
import { ElLoading, ElMessage, ElMessageBox } from "element-plus";
import utils from "@/common/utils";
import enums from "@/common/enums";
import {  Delete } from "@element-plus/icons-vue";

import {
  queryOnlineUserPageList,
  deleteOnlineUser,
  batchDelOnlineUser,
} from "@/api/system";

export default {
  components: {  Delete  },
  name: "OnlineUser",
  // components: {},
  setup (props, context) {
    onMounted(() => {
      nextTick(pageFunc.getTableData);
      // let st = null;
      // window.onresize = () => {
      //   return (() => {
      //     if (st) {
      //       clearTimeout(st);
      //       st = null;
      //     }
      //     st = setTimeout(() => {
      //       this.setPageHeight();
      //     }, 500);
      //   })();
      // };
    });

    const onlineuserTable = ref();
    const pageState = reactive({
      pageData: {
        permissions: {
          Del: utils.checkPermission("onlineuser_delete"),
        },
        typeEnumObj: enums.WhetherEnum,
        screenHeight: 0,
        queryParams: {
          pageIndex: 1,
          pageSize: 10,
          sortFields: "",
          sortOrder: enums.SortEnum.Asc.key,
          keyword: "",
        },
        tableParams: {
          tableLoading: false,
          tableHeight: 0,
          // tableColumns: [],
          pageSizeOptions: ["10", "15", "30", "50", "100", "200"],
          total: 0,
          tableData: [],
          multipleSelection: [],
          currentRow: {},
        },
      },
    });
    const pageFunc = {
      getTableData: () => {
        pageState.pageData.tableParams.currentRow = {};
        pageState.pageData.tableParams.tableLoading = true;
        queryOnlineUserPageList(pageState.pageData.queryParams)
          .then((ret) => {
            console.log('aaaaaaaaaaa',ret)
            pageState.pageData.tableParams.tableData = ret.data;
            pageState.pageData.tableParams.total = ret.recordsTotal;
            pageState.pageData.tableParams.tableLoading = false;
          })
          .catch((error) => {
            ElMessage.error(error.message || "请求出错");
            pageState.pageData.tableParams.tableLoading = false;
          });
      },
      tableSortFunc: ({ column, prop, order }) => {
        pageState.pageData.queryParams.sortFields = prop;
        if (!utils.isEmpty(order) && order === "ascending") {
          pageState.pageData.queryParams.sortOrder = enums.SortEnum.Asc.key;
        } else if (!utils.isEmpty(order) && order === "descending") {
          pageState.pageData.queryParams.sortOrder = enums.SortEnum.Desc.key;
        } else {
          pageState.pageData.queryParams.sortOrder = enums.SortEnum.Asc.key;
        }
        pageFunc.getTableData();
      },
      typeFormatter: (row, column, cellValue, index) => {
        return pageState.pageData.typeEnumObj.getLabelByValue(cellValue);
      },
      onHandleSelectionChange: (val) => {
        pageState.pageData.tableParams.multipleSelection = val;
      },
      onHandleCurrentChange: (e) => {
        pageState.pageData.queryParams.pageIndex = e;
        pageFunc.getTableData();
      },
      onHandleSizeChange: (e) => {
        pageState.pageData.queryParams.pageIndex = 1;
        pageState.pageData.queryParams.pageSize = e;
        pageFunc.getTableData();
      },
      onHandleKeywordBlur: () => {
        pageState.pageData.queryParams.pageIndex = 1;
        pageFunc.getTableData();
      },
      onHandleReset: () => {
        pageState.pageData.queryParams.pageIndex = 0;
        pageFunc.getTableData();
      },

      onHandleBatchDel: () => {
        if (
          utils.isEmpty(pageState.pageData.tableParams.multipleSelection) ||
          pageState.pageData.tableParams.multipleSelection.length < 1
        ) {
          ElMessage.warning("请选中需要操作的数据行");
          return;
        }
        ElMessageBox.confirm("此操作将批量删除选中Token，用户将下线, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            const loading = ElLoading.service({
              lock: true,
              background: "rgba(0, 0, 0, 0.7)",
            });
            batchDelOnlineUser(
              pageState.pageData.tableParams.multipleSelection.map((p) => p.ftoken)
            )
              .then(() => {
                loading.close();
                ElMessage.success("下线成功");
                pageFunc.getTableData();
              })
              .catch((error) => {
                loading.close();
                ElMessage.error(error.message || "请求出错");
              });
          })
          .catch(() => { });
      },
      onHandleDel: (id) => {
        if (utils.isEmpty(id)) {
          ElMessage.warning("请选中需要操作的数据行");
          return;
        }
        ElMessageBox.confirm("此操作将删除Token，用户将下线, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            const loading = ElLoading.service({
              lock: true,
              background: "rgba(0, 0, 0, 0.7)",
            });
            deleteOnlineUser(id)
              .then(() => {
                loading.close();
                ElMessage.success("下线成功");
                pageFunc.getTableData();
              })
              .catch((error) => {
                loading.close();
                ElMessage.error(error.message || "请求出错");
              });
          })
          .catch(() => { });
      },
      // onHandleReset : ()=>{
      //   pageData.tableParams.tableData.ffullname = ''
      //   pageData.tableParams.tableData.fusername = ''
      //   getTableData()
      // }
    };

    return {
      onlineuserTable,
      ...toRefs(pageState),
      ...pageFunc,
    };
  },
};
</script>

<style lang="scss" scoped>
.container {
  padding: 0;
  margin: 0;
  .header {
    width: 100%;
    background-color: white;
    user-select: none;

    text-align: left;
    span {
      line-height: 50px;
      font-size: 18px;
      font-weight: 700;
      text-align: left;
      margin-left: 20px;
    }
  }

  .body {
    margin-top: 20px;
    background-color: white;
    height: 77vh;
    // 树形下拉框
    .mainaside {
      background-color: rgb(230, 240, 250);
      border-right: 1px solid #ccc;
      .user_tree {
        .el-tree {
          border-bottom: 1px solid #ddd;
        }
      }
    }
    // 内容表格
    .mainmain {
      .firsthe {
        display: flex;
        justify-content: space-between;
        margin-bottom: 20px;

        .search {
          display: flex;
          align-items: center;
          user-select: none;

          .el-input {
            margin-right: 20px;
          }
        }
      }
    }
  }
}
</style>

<style>
.el-dialog {
  display: flex;
  flex-direction: column;
  margin: 0 !important;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  user-select: none;
}

.el-dialog .el-dialog__body {
  flex: 1;
  overflow: auto;
}
.el-dialog .el-dialog__header {
  padding: 20px 0;
  padding-left: 20px;
  margin: 0;

  word-break: break-all;
  border-bottom: 1px solid #ddd;
  text-align: left;
}

.el-select {
  width: 100%;
  border: none;
  border-radius: 0;
}
.el-select .el-option {
  width: 100%;
  border: none;
  border-radius: 0;
}
</style>
